<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i> 分站指南文章列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-button type="primary" v-show="this.tableData.length<2" round @click="urlAdd"><i class="el-icon-plus"> </i>&nbsp;&nbsp;发布城市指南文章</el-button>
            <div style="height:40px"></div>
            <div class="handle-box"></div>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column prop="id" label="ID" width="80" align="center">
                </el-table-column>
                <el-table-column label="文章图片" width="220" >
                    <template slot-scope="scope">
                        <img :src="scope.row.head_img" style="width:200px;height:120px;"/>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="文章标题" align="center">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="170" align="center">
                </el-table-column>
                <el-table-column label="状态" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleSel(scope.$index, scope.row)">查看</el-button>
                         <el-button class="edit" size="small" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </div>
       
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getFenzhanArticleList } from "@/api/branch/substation";
export default {
    name:"branchPrice",
    data () {
        return {
            pageIndex:1,//当前页码
            pageSize:10,//每页10条
            totalPages:1,//默认的总条数
            title:'',// 新闻标题
            tableData:[],//表格数据
            delVisible:false, //是否显示查看详情弹出层
            delIndex:0,
            delId:0
        }
    },
    computed:{
        ...mapGetters(['userInfo']),
    },
    mounted() {
        // console.log(this.userInfo)
        this.$nextTick(function () {
            
            //获取待处理的数据
            this.getMemberData();
            
        })
    },
    methods: {
        //获取tabs数据
        getMemberData (){
            //获取分站文章的数据
            getFenzhanArticleList(this.userInfo.city_id).then(response=>{
                // console.log(response);
                if(response.code==200){
                    this.tableData = response.data;
                }else{
                    this.$notify.error({
                        title: '异常',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }
            });
            
        },
        // 分页导航
        handleCurrentChange (val){
            // this.cur_page = val;
            //     this.getData();
        },
        //查询
        search (){
            this.getMemberData();
        },
        //查看
        handleSel(index, row) {
            if (row.id && row.id > 0) {
                //跳转到详情
                this.$router.push({ path: "/branch/substation/select" ,query:{id:row.id } });
            }
        },
        //编辑
        handleEdit(index, row) {
            if (row.id && row.id > 0) {
                //跳转到编辑
                this.$router.push({ path: "/branch/substation/edit",query:{id:row.id }});
            }
        },
        //查看
        urlAdd() {
            if(this.tableData.length>=2){
                this.$notify.error({
                    title: '提示',
                    duration:2000,
                    message: '分站城市指南文章最多发布两篇文章'
                });
            }else{
                this.$router.push({ path: "/branch/substation/add" });
            }
            
        },
    }
}
</script>
<style lang="stylus" scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
        margin-right :30px;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .edit {
    color: #ff9800;
}

.del {
    color: #e51c23;
}

.download {
    color: #67C23A;
}
</style>


